<template>
  <div class="container">
    <div class="nav">
      <el-card>
        <el-button @click="exportData">数据导出</el-button>
        <el-upload
          :action="baseUrl + '/user/import'"
          :headers="{ Authorization: user.token }"
          :on-success="handleImport"
          style="display: inline-block; margin-left: 10px; vertical-align: top"
          :show-file-list="false"
          :beforeUpload="beforeUpload"
        >
          <el-button>导入数据</el-button>
        </el-upload>
        <!-- <el-button>User</el-button> -->
      </el-card>
    </div>

    <div class="content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="gender" label="性别">
          <template #default="scope">
            <span v-if="scope.row.gender === 1" style="color: skyblue">♂</span>
            <span v-if="scope.row.gender === 0" style="color: pink">♀</span>
            <span v-else> 未知 </span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="avatar" label="头像">
          <template #default="scope">
            <div style="width: 60px; height: 60px; border-radius: 50%">
              <img
                :src="
                  scope.row.avatar ||
                  'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                "
                style="width: 60px; height: 60px; border-radius: 50%"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </div>

    <div style="margin: 10px 0">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="limit"
        :total="totalCount"
        :current-page="currentPage"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { addUser, exportUserData, userData } from "@/api/user";
import { ElMessage } from "element-plus";
import { ref } from "vue";
//当前页面
let currentPage = ref(1);
// 总条数
let totalCount = ref(0);
// 每页显示限制
let limit = ref(10);
const pageData = ref({
  pageNum: currentPage.value,
  pageSize: limit.value,
});
const tableData = ref([]);
const showData = async () => {
  const res = await userData(pageData.value);
  tableData.value = res.data.list;
  totalCount.value = res.data.total;
  console.log(res);
};
showData();
const user = JSON.parse(localStorage.getItem("user"));
const exportData = async () => {
  console.log("导出数据");
  const res = await exportUserData();
  console.log(res);
  const url =
    "http://localhost:8080/api/user/export?Authorization=" + user.token;
  window.location.href = url;
};
const addUserData = async () => {
  const res = await addUser();
  console.log(res);
};
// addUserData()
const baseUrl = "http://localhost:8080/api";
const handleImport = (res) => {
  console.log(res);
  if (res.code === 200) {
    ElMessage.success("导入成功");
    showData();
  } else {
    ElMessage.error("导入失败");
  }
};
const pageChange = (page) => {
  currentPage.value = page;
  pageData.value.pageNum = page;
  showData();
};
const beforeUpload = (file) => {
  //限制文件大小
  const maxSize = 5 * 1024 * 1024; //限制3M
  if (file.size > maxSize) {
    ElMessage.warning("文件大小不得超过5M");
    return false;
  }
  //限制文件格式
  const accept = ".xlsx,.xls,.XLSX,.XLS";
  const isAccept = accept.split(",").some((item) => file.name.endsWith(item));
  if (!isAccept) {
    ElMessage.warning("文件格式不正确");
    return false;
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  /* display: flex; */
  /* flex-direction: column; */
  /* background-color: aqua; */
}
.nav {
  height: 60px;
  margin-top: 10px;
  /* background-color: yellow */
}
.nav .el-card {
  height: 60px;
  width: 100%;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  /* margin: 10px 0 */
}
.content {
  margin-top: 10px;
}
</style>